<template>
    <div style="width: 100%;height: 100%;display: flex;flex-direction: column;background: #f5f5f5;">
        <div
            style="width: 100%;height: 70px;display: flex;align-items: center;padding: 20px 10px;box-sizing:border-box;background: #085ffa; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);">
            <n-input v-model:value="value" type="text" placeholder="请输入要搜索的用户" />
            <n-button style="width: 50px;margin-left: 10px; flex-shrink: 0;" type="info">
                +
            </n-button>
        </div>
        <div style="width: 100%;" class="scrollbar-vertical">
            <friendItem @click="handlechooseMember(e, i)" v-for="(e, i) in (list as any)" :key="e._id" :item="e"
                :isActive="cIndex == i" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import friendItem from './friendItem.vue'
 defineProps({
    list: {
        type: Array,
        default: () => []
    }
})
const cIndex = ref<number>(-1)
// watch(() => props.list, (newVal) => {
//     console.log(newVal)
// }, {
//     // immediate: true,
//     deep: true
// })
const emits = defineEmits(['chooseMember'])
const handlechooseMember = (user: any, index: number) => {
    cIndex.value = index
    emits('chooseMember', user)
}
const value = ref('')
</script>

<style scoped>
.scrollbar-vertical {
    top: 0;
    right: 0;
    width: 17px;
    height: 100%;
    overflow-x: hidden;
    scrollbar-3dlight-color: #999;
    scrollbar-arrow-color: white;
    scrollbar-base-color: white;
    scrollbar-face-color: #999;
    border-radius: 5px 5px;
}
</style>